<script setup lang="ts">
import Content from '@/components/Content/index.vue'
import UploadFontProgress from '@/components/UploadFontProgress/index.vue'


import type { FileType, Emits } from './utils/types'
import { ElMessage } from 'element-plus'
import APIUploadMaterial from '@/api/upload-material'
import PushItem from './components/PushItem/index.vue'

const fileRef = shallowRef<HTMLInputElement>()
const fileFontRef = shallowRef<HTMLInputElement>()


const objectFile = ref<any>({})
const fileType = shallowRef<FileType>()
function handleUpload(str: FileType) {
    fileType.value = str
    if (objectFile.value[str]) {
        ElMessage.error('已上传该文件，请删除对应的文件后再重新操作')
        return
    }
    fileRef.value?.click()
}

function onChangeFile(e: Event) {
    const dom = e.target as HTMLInputElement
    const files = dom.files
    if (!files || !fileType.value) return
    if (!files[0].type.includes('image')) {
        dom.value = ''
        ElMessage.error('只能上传图片文件类型')
        return
    }
    objectFile.value[fileType.value] = files[0]
    dom.value = ''
}

function handleUploadFont() {
    if (objectFile.value['file']) {
        ElMessage.error('已上传该文件，请删除对应的文件后再重新操作')
        return
    }
    fileFontRef.value?.click()
}

function onChangeFontFile(e: Event) {
    const dom = e.target as HTMLInputElement
    const files = dom.files
    if (!files) return
    objectFile.value['file'] = files[0]
    dom.value = ''
}

const isShowUpload = computed(() => {
    return objectFile.value['main_image'] && objectFile.value['copyright_image'] && objectFile.value['score_1'] && objectFile.value['score_2'] && objectFile.value['score_3'] && objectFile.value['file']
})

const isShowEmpty = computed(() => {
    return objectFile.value['main_image'] || objectFile.value['copyright_image'] || objectFile.value['score_1'] || objectFile.value['score_2'] || objectFile.value['score_3'] || objectFile.value['file']
})


function onRemove(str: FileType) {
    objectFile.value[str] = undefined
}

const formFile = ref<any>({})

const disabledUploadFiles = shallowRef<boolean>(false)

const mainImageRef = shallowRef<InstanceType<typeof UploadFontProgress>>()
const fileProgressRef = shallowRef<InstanceType<typeof UploadFontProgress>>()
const copyrightImageRef = shallowRef<InstanceType<typeof UploadFontProgress>>()
const score1Ref = shallowRef<InstanceType<typeof UploadFontProgress>>()
const score2Ref = shallowRef<InstanceType<typeof UploadFontProgress>>()
const score3Ref = shallowRef<InstanceType<typeof UploadFontProgress>>()


function handleUploadFiles() {
    disabledUploadFiles.value = true
    mainImageRef.value?.handleNormalUpload()
    copyrightImageRef.value?.handleNormalUpload()
    score1Ref.value?.handleNormalUpload()
    score2Ref.value?.handleNormalUpload()
    score3Ref.value?.handleNormalUpload()
}

function onNormalUpload(value: string | string[], str: FileType) {
    formFile.value[str] = value
}


watch(formFile, (newValue) => {
    if (newValue.main_image && newValue.copyright_image && newValue.score_1 && newValue.score_2 && newValue.score_3) {
        fileProgressRef.value?.handleUpload()
    }
}, { deep: true })

function onSuccess() {
    ElMessage.success('已全部上传完毕')
    formFile.value = {}
    objectFile.value = {}
    getIsPushFont()
    disabledUploadFiles.value = false
}

const loading = shallowRef<boolean>(false)
const isPushFont = ref<any[]>()
function getIsPushFont() {
    loading.value = true
    APIUploadMaterial.getIsPushFont().then(({ data }) => {
        isPushFont.value = data
    }).finally(() => {
        loading.value = false
    })
} getIsPushFont()

defineExpose({
    disabledUploadFiles
})

</script>

<template>
    <div class="font">
        <div class="btns">
            <div class="btns-left">
                <button class="btns-left-btn" type="button" @click="handleUpload('main_image')">
                    <p>+</p>
                    <p>上传字体封面</p>
                </button>
                <button class="btns-left-btn" type="button" @click="handleUploadFont">
                    <p>+</p>
                    <p>字体源文件(无需打包)</p>
                </button>
                <button class="btns-left-btn" type="button" @click="handleUpload('copyright_image')">
                    <p>+</p>
                    <p>版权证明</p>
                </button>
            </div>
            <el-button type="danger" class="btns-right" v-if="isShowUpload" @click="handleUploadFiles"
                :disabled="disabledUploadFiles">上传</el-button>
            <input type="file" @change="onChangeFile" style="display: none;" ref="fileRef" accept="image/*" />
            <input type="file" @change="onChangeFontFile" style="display: none;" ref="fileFontRef" />
        </div>
        <div class="btn-music">
            <div class="btn-music-btns">
                <button class="btn-music-btn" @click="handleUpload('score_1')">
                    <p>+</p>
                    <p>效果页</p>
                </button>
                <button class="btn-music-btn" @click="handleUpload('score_2')">
                    <p>+</p>
                    <p>效果页</p>
                </button>
                <button class="btn-music-btn" @click="handleUpload('score_3')">
                    <p>+</p>
                    <p>效果页</p>
                </button>
            </div>
        </div>
        <Content class="center">
            <div v-if="!isShowEmpty" class="empty">在“上传字体封面、字体源文件、版权证明、3张效果展示图"处添加上传文件</div>
            <TransitionGroup name="list">
                <UploadFontProgress ref="mainImageRef" @on-remove="onRemove('main_image')" v-if="objectFile.main_image"
                    :file="objectFile.main_image" @on-normal-upload="onNormalUpload($event, 'main_image')" />
                <UploadFontProgress ref="fileProgressRef" @on-remove="onRemove('file')" v-if="objectFile.file"
                    :file="objectFile.file" :formFile="formFile" @on-success="onSuccess" />
                <UploadFontProgress ref="copyrightImageRef" @on-remove="onRemove('copyright_image')"
                    v-if="objectFile.copyright_image" :file="objectFile.copyright_image"
                    @on-normal-upload="onNormalUpload($event, 'copyright_image')" />
                <UploadFontProgress ref="score1Ref" @on-remove="onRemove('score_1')" v-if="objectFile.score_1"
                    :file="objectFile.score_1" @on-normal-upload="onNormalUpload($event, 'score_1')" />
                <UploadFontProgress ref="score2Ref" @on-remove="onRemove('score_2')" v-if="objectFile.score_2"
                    :file="objectFile.score_2" @on-normal-upload="onNormalUpload($event, 'score_2')" />
                <UploadFontProgress ref="score3Ref" @on-remove="onRemove('score_3')" v-if="objectFile.score_3"
                    :file="objectFile.score_3" @on-normal-upload="onNormalUpload($event, 'score_3')" />
            </TransitionGroup>
        </Content>
        <div class="push-list" v-loading="loading">
            <PushItem v-for="item in isPushFont" :key="item.goods_id" :item="item" @get-is-pus="getIsPushFont"
                @close="$emit('close')" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.font {
    .push-list {
        width: 900px;
        display: grid;
        grid-template-columns: repeat(4, 200px);
        margin-top: 54px;
        justify-content: space-between;
        gap: 30px 0;

        >div {
            box-sizing: border-box;
            height: 112px;
            border-radius: 5px;
            overflow: hidden;
        }
    }

    .btn-music {
        .btn-music-btns {
            display: flex;
            gap: 0 34px;

            .btn-music-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 175px;
                height: 38px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #ffffff;
                border: 1px dashed rgba(206, 206, 206, 1);
                gap: 0 10px;
                margin-top: 24px;

                p {
                    &:first-child {
                        color: #ff0000;
                        font-size: 30px;
                        font-weight: 100;
                        line-height: 15px;
                    }

                    &:last-child {
                        font-size: 14px;
                        color: #9A9A9A;
                    }
                }
            }
        }
    }

    .center {
        margin-top: 20px;
        min-height: 172px;
        position: relative;
        padding: 8px 12px;
        box-sizing: border-box;

        .empty {
            font-size: 13px;
            color: #9A9A9A;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            width: 100%;
            text-align: center;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }

    .btns {
        display: flex;
        justify-content: space-between;

        .btns-right {
            width: 170px;
            height: 38px;
            line-height: 20px;
            border-radius: 5px;
            font-size: 14px;
            letter-spacing: 5px;
            background-color: #F91B1B;
        }

        .btns-left {
            display: flex;
            gap: 0 34px;

            .btns-left-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 175px;
                height: 38px;
                border: none;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                background-color: rgba(55, 133, 242, 1);
                color: rgba(255, 255, 255, 1);
                gap: 0 5px;
            }


            .btns-left-btn-music {
                background-color: #ffffff;
                color: #ff0000;
                border: 1px solid rgba(206, 206, 206, 1);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0 10px;
            }
        }
    }
}

.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
